import {message} from 'antd'
import React, {useState, useRef, useEffect} from 'react'
import {PageHeaderWrapper} from '@ant-design/pro-layout'
import ProTable, {ProColumns, ActionType} from '@ant-design/pro-table'
import {connect} from 'umi'
import { getProtocolPersonnelPage, updateProtocolPersonnelStatus } from '../service'
import CreateForm from './components/CreateForm'
import MyFrameModal from '@/pages/components/MyFrameModal'
import moment from 'moment'
import {genderList, trainingMethodTypes, protocolStatus, employeeStatusList} from "@/utils/constant";

const TableList = ({contractSubject,global = {}}) => {
  const {options = {}} = global;
  const {nativePlace = []} = options;
  const { contractSubjectList } = contractSubject;
  const actionRef = useRef();
  const [contractSubjects, setContractSubjectList] = useState([]);
  const [visible, setVisible] = useState(null);
  const [detailVisible, setDetailVisible] = useState(false);
  const [current, setCurrent] = useState(undefined);
  const [isUpdate, setIsUpdate] = useState(null);
  const [detailUrl, setDetailUrl] = useState('');


  useEffect(()=>{
    setContractSubjectList(contractSubjectList)
  },[contractSubjectList]);

  const columns = [
    {
      title: '序号',
      dataIndex: 'num',
      render: (text, record, index) => `${index + 1}`,
      hideInSearch: true,
      fixed: 'left',
      align: 'center',
      width: 60
    },
    {
      title: '工号',
      dataIndex: 'code',
      key: 'code',
      disabled: true,
      fixed: 'left',
      align: 'center',
      width: 70
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      disabled: true,
      fixed: 'left',
      align: 'center',
      width: 70
    },
    {
      title: '身份证号码',
      dataIndex: 'idcard',
      key: 'idcard',
      disabled: true,
      hideInSearch: true,
      align: 'center',
      //width: 100
    },
    {
      title: '性别',
      dataIndex: 'gender',
      key: 'gender',
      hideInSearch: true,
      disabled: true,
      render: (text) => genderList.find(item => item.value === text)?.label,
      align: 'center',
      //width: 30
    },
    {
      title: '部门',
      dataIndex: 'unitname',
      key: 'unitname',
      disabled: true,
      hideInSearch: true,
      align: 'center',
      //width: 60
    },
    {
      title: '岗位',
      dataIndex: 'jobname',
      key: 'jobname',
      disabled: true,
      hideInSearch: true,
      align: 'center',
      //width: 80
    },
    {
      title: '在职状态',
      dataIndex: 'employeestatus',
      disabled: true,
      hideInSearch: true,
      align: 'center',
      //width: 80,
      render: text => {
        return text !=='-' && employeeStatusList.find(e => text === e.value)?.label
      }
    },
    {
      title: '项目名称',
      dataIndex: 'projectName',
      align: 'center',
      //width: 80
    },
    {
      title: '培训机构',
      dataIndex: 'trainingStructure',
      hideInSearch: true,
      align: 'center',
      //width: 80
    },
    {
      title: '培训起止时间',
      key: 'trainingTime',
      dataIndex: 'trainingTime',
      hideInSearch: true,
      valueType: 'dateRange',
      render: (text, record) => {
        return moment(record.trainingStartTime).format('YYYY-MM-DD') + ' - ' + moment(record.trainingEndTime).format('YYYY-MM-DD')
      },
      align: 'center',
      //width: 80
    },
    {
      title: '培训方式',
      dataIndex: 'trainingMethod',
      align: 'center',
      hideInSearch: true,
      valueEnum: {
        0: {text: trainingMethodTypes[0].label},
        1: {text: trainingMethodTypes[1].label},
        2: {text: trainingMethodTypes[2].label},
      },
      //width: 80
    },
    {
      title: '培训学杂费',
      dataIndex: 'trainingSpending',
      key: 'trainingSpending',
      hideInSearch: true,
      render: (text, record) => {
        return text
      },
      align: 'center',
      //width: 60
    },
    {
      title: '往返交通住宿伙食费',
      dataIndex: 'trainingFoodSpending',
      key: 'trainingFoodSpending',
      hideInSearch: true,
      render: (text, record) => {
        return text
      },
      align: 'center',
      //width: 60
    },
    {
      title: '培训费用合计',
      dataIndex: 'trainingTotal',
      key: 'trainingTotal',
      hideInSearch: true,
      render: (text, record) => {
        return text
      },
      align: 'center',
      //width: 60
    },
    {
      title: '甲方主体',
      dataIndex: 'companyId',
      hideInSearch: true,
      align: 'center',
      //width: 50,
      render: (text) => {
        return text!=='-' && contractSubjects.find(item => item.id===text)?.name
      }
    },
    {
      title: '服务期限起止日期',
      dataIndex: 'serviceTime ',
      key: 'serviceTime',
      hideInSearch: true,
      render: (text, record) => {
        return `${moment(record.serviceStartTime).format('YYYY-MM-DD')} - ${moment(record.serviceEndTime).format('YYYY-MM-DD')}`
      },
      align: 'center',
      //width: 80
    },
    {
      title: '签订合同日期',
      dataIndex: 'signedTime ',
      key: 'signedTime',
      hideInSearch: true,
      render: (text, record) => {
        return `${moment(new Date(record.signedTime)).format('YYYY-MM-DD')}`
      },
      align: 'center',
      //width: 80
    },
    {
      title: '培训地点',
      dataIndex: 'trainingLocation',
      key: 'trainingLocation',
      hideInSearch: true,
      align: 'center',
      //width: 100,
      render: (text) => {
        let placeList = nativePlace;
        let showStr = '';
        text.split(',').forEach(item => {
          for (let place of placeList){
            if (parseInt(item) === place.value){
              showStr += place.title;
              placeList = place.children && place.children;
              break;
            }
          }
        });
        return showStr;
      }
    },
    {
      title: '培训协议地址',
      dataIndex: 'contractOssUrl',
      hideInSearch: true,
      align: 'center',
      //width: 80,
      render: text => (text !== '-' && <a onClick={() => showDetail(text)}>查看培训协议</a>)
    },
    {
      title: '手动终止原因',
      dataIndex: 'remarks',
      key: 'remarks',
      hideInSearch: true,
      align: 'center',
      //width: 150
    },
    {
      title: '状态',
      dataIndex: 'status',
      hideInSearch: true,
      valueEnum: {
        0: { text: protocolStatus[0].label, status: 'Default'},
        1: { text: protocolStatus[1].label, status: 'Processing'},
        2: { text: protocolStatus[2].label, status: 'Success'},
        3: { text: protocolStatus[3].label, status: 'Warning'},
        4: { text: protocolStatus[4].label, status: 'Error'},
      },
      align: 'center',
      fixed: 'right',
      width: 80
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      fixed: 'right',
      align: 'center',
      hideInSearch: true,
      width: 100,
      render: (item, record) => (record.status===2 && <a onClick={() => termination(record, false)}>终止</a>),
    },
  ];

  const termination = (record, isUp) => {
    setIsUpdate(isUp);
    setCurrent(record);
    setVisible(true);
  };

  const handleModalVisible = (value) => {
    setCurrent(null);
    setVisible(value)
  };

  const showDetail = (url) => {
    // setDetailVisible(true);
    // setDetailUrl(url.replace("http","https"));
    window.open(url)
  };

  const handleCancel = () => {
    setDetailVisible(false);
    setDetailUrl(null)
  };

  const handleSubmit = (values) => {
    updateProtocolPersonnelStatus(values).then(res => {
      if (res.flag){
        message.success('培训协议终止成功！')
      }else {
        message.error(res.error);
      }
      actionRef.current.reload();
      handleModalVisible(false);
    })
  };

  return (
    <PageHeaderWrapper>
      <ProTable
        actionRef={actionRef}
        rowKey="id"
        request={(params) => getProtocolPersonnelPage(params)}
        columns={columns}
        scroll={{x: '190%'}}
      />
      <CreateForm
        isUpdate={isUpdate}
        current={current}
        visible={visible}
        onCancel={() => handleModalVisible(false)}
        onSubmit={handleSubmit}
      />

      {/*<MyFrameModal
        visible={detailVisible}
        onCancel={handleCancel}
        src={detailUrl}
      />*/}

    </PageHeaderWrapper>
  )
};

export default connect(({contractSubject,global}) => ({
  contractSubject,
  global
}))(TableList)
